<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<FormItem label="公告描述" prop="noticeDesc">
						<Input v-model="form.noticeDesc" autocomplete="off" :maxlength="16" />
					</FormItem>
					<FormItem label="公告链接" prop="noticeUrl">
						<Input v-model="form.noticeUrl" autocomplete="off" :maxlength="16" />
					</FormItem>
					<FormItem label="是否展示" prop="isShow">
						<i-switch v-model="form.isShow" size="large">
							<span slot="open">On</span>
							<span slot="close">Off</span>
						</i-switch>
					</FormItem>
				</Form>
			</div>
			<div class="drawer-footer br" v-show="type != '0'">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
	</div>
</template>

<script>
	import {
		addOrEditNotice
	} from '@/api/index';
	import uploadPicInput from '@/views/my-components/xboot/upload-pic-input';
	export default {
		name: 'user',
		components: {
			uploadPicInput
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object
			},
			type: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				visible: this.value,
				title: '',
				submitLoading: false,
				maxHeight: 510,
				form: {
					noticeDesc: '',
					noticeUrl: '',
					isShow: false,
					id: ''
				},
				formValidate: {
					// 表单验证规则
					pic: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			change(status) {
				this.$Message.info('开关状态：' + status);
			},
			submit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						if (this.type == '1') {
							// 编辑
							this.submitLoading = true;
							addOrEditNotice(this.form).then(res => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success('操作成功');
									this.$emit('on-submit', true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							delete this.form.id;
							this.submitLoading = true;
							addOrEditNotice(this.form).then(res => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success('操作成功');
									this.$emit('on-submit', true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == '1') {
					this.title = '编辑公告';
					this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
				} else if (this.type == '2') {
					this.title = '添加公告';
					this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
				} else {
					this.title = '公告详情';
					this.maxHeight = '100%';
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type == '0' || this.type == '1') {
					// 回显数据
					let data = this.data;
					// 回显
					this.form = data;
				} else {
					// 添加
					this.form = {
						noticeDesc: '',
						noticeUrl: '',
						isShow: false,
					};
				}
				this.visible = value;
			}
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit('input', value);
			}
		}
	};
</script>

<style lang="less">
	@import '../../../styles/drawer-common.less';
</style>
